<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: top;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 450px;
            height: 450px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }

        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="fdj">
    <!--小盒子-->
    <div class="small">
        <img src="images/001.jpg" alt=""/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/0001.jpg" alt=""/>
    </div>
</div>
</body>
</html>
<script>
    var fdj = document.getElementById("fdj");  // 获得最大的盒子
    var small = fdj.children[0];  // 获得small 小图片 350盒子
    var big = fdj.children[1];  // 获得 大图片 800 盒子
    var mask = small.children[1];  // 小的黄色盒子
    var bigImage = big.children[0]; // 大盒子里面的图片
    small.onmouseover = function () {   // 鼠标经过显示出他们
        mask.style.display = "block";
        big.style.display = "block";
    }
    small.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //  鼠标在small 内移动
    var x = 0;
    var y = 0;
    small.onmousemove = function (event) {
        var event = event || window.event;
        x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;  // 再某个盒子内的坐标
        //alert(this.offsetLeft);
        y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
        if (x < 0) {
            x = 0;
        }
        else if (x > small.offsetWidth - mask.offsetWidth) {
            x = small.offsetWidth - mask.offsetWidth;
        }
        if (y < 0) {
            y = 0;
        }
        else if (y > small.offsetHeight - mask.offsetHeight) {
            y = small.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = x + "px";
        mask.style.top = y + "px";
        /*计算  ：  夫子 一顿吃 2个馒头    娇子  一顿 4个馒头
        问  夫子今天吃了 3个馒头  娇子应该吃几个？  */
        /*计算出他们的倍数   4 / 2    2倍
         3 * 2  == 6个  */
        /* 大图盒子 /  小图盒子  倍数
         我们 再小图移动的距离 *  倍数  ==  大图的位置*/
        bigImage.style.left = -x * big.offsetWidth / small.offsetWidth + "px";
        bigImage.style.top = -y * big.offsetHeight / small.offsetHeight + "px";

    }
</script>